"use client"

import { Type, ImageIcon, Square, Trash2, MapPin } from "lucide-react"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Badge } from "@/components/ui/badge"
import type { Layer } from "@/components/image-analyzer"
import { cn } from "@/lib/utils"

interface LayersListProps {
  layers: Layer[]
  selectedLayer: Layer | null
  onLayerSelect: (layer: Layer) => void
  onLayerDelete: (layerId: string) => void
}

export default function LayersList({ layers, selectedLayer, onLayerSelect, onLayerDelete }: LayersListProps) {
  const getLayerIcon = (type: Layer["type"]) => {
    switch (type) {
      case "text":
        return <Type className="h-4 w-4" />
      case "image":
        return <ImageIcon className="h-4 w-4" />
      case "shape":
        return <Square className="h-4 w-4" />
    }
  }

  return (
    <div className="space-y-3">
      <h3 className="text-sm font-semibold text-foreground">Detected Layers</h3>
      <ScrollArea className="h-[500px] pr-4">
        <div className="space-y-2">
          {layers.map((layer) => (
            <div
              key={layer.id}
              className={cn(
                "group p-3 rounded-lg border border-border bg-card hover:bg-accent/5 transition-colors cursor-pointer",
                selectedLayer?.id === layer.id && "bg-accent/10 border-accent",
              )}
              onClick={() => onLayerSelect(layer)}
            >
              <div className="flex items-start justify-between gap-2">
                <div className="flex items-start gap-3 flex-1 min-w-0">
                  <div className="mt-0.5 text-muted-foreground">{getLayerIcon(layer.type)}</div>
                  <div className="flex-1 min-w-0 space-y-2">
                    <div className="flex items-center gap-2">
                      <p className="text-xs font-medium text-muted-foreground uppercase">{layer.type} Layer</p>
                      {layer.metadata?.confidence && (
                        <Badge variant="secondary" className="text-xs">
                          {Math.round(layer.metadata.confidence * 100)}%
                        </Badge>
                      )}
                    </div>
                    <p className="text-sm text-foreground line-clamp-2">{layer.content}</p>
                    <div className="flex flex-wrap gap-1.5 text-xs text-muted-foreground">
                      {layer.type === "text" && layer.style?.fontSize && (
                        <Badge variant="outline" className="text-xs font-normal">
                          {layer.style.fontSize}
                        </Badge>
                      )}
                      {layer.type === "text" && layer.style?.fontFamily && (
                        <Badge variant="outline" className="text-xs font-normal">
                          {layer.style.fontFamily}
                        </Badge>
                      )}
                      {layer.type === "text" && layer.style?.fontWeight && layer.style.fontWeight !== "400" && (
                        <Badge variant="outline" className="text-xs font-normal">
                          {layer.style.fontWeight}
                        </Badge>
                      )}
                      {layer.style?.color && (
                        <Badge variant="outline" className="text-xs font-normal flex items-center gap-1">
                          <div
                            className="w-2.5 h-2.5 rounded-full border border-border"
                            style={{ backgroundColor: layer.style.color }}
                          />
                          {layer.style.color}
                        </Badge>
                      )}
                    </div>
                    {layer.position && (
                      <div className="flex items-center gap-1 text-xs text-muted-foreground">
                        <MapPin className="h-3 w-3" />
                        <span>
                          x:{layer.position.x} y:{layer.position.y} w:{layer.position.width} h:{layer.position.height}
                        </span>
                      </div>
                    )}
                  </div>
                </div>
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
                  onClick={(e) => {
                    e.stopPropagation()
                    onLayerDelete(layer.id)
                  }}
                >
                  <Trash2 className="h-4 w-4 text-destructive" />
                </Button>
              </div>
            </div>
          ))}
        </div>
      </ScrollArea>
    </div>
  )
}
